<template>
  <div class="custom_group_price" :class="item.theme === 'black' && 'black'">
    <h1 class="custom_listpinterest_header" v-if="item.title">
      <div class="custom_listpinterest_header_title">{{ item.title }}</div>
      <div class="custom_listpinterest_header_slogan">{{ item.slogan }}</div>
      <div><slot name="right"></slot></div>
    </h1>
    <div class="custom_group_price_content">
      <router-link
        :to="price.url"
        v-for="(price, index) in item.data"
        :key="'groupPrice_index_' + index"
        class="custom_group_price_content_item"
      >
        <article>
          <header>
            <h1 class="animate__animated animate__zoomIn">{{ price.title }}</h1>
            <p>
              {{ price.unit
              }}<span :class="price.trend === 'up' ? 'green' : 'red'">{{
                price.price
              }}</span>
            </p>
          </header>
        </article>
      </router-link>
    </div>
  </div>
</template>
<script>
export default {
  name: "groupPrice",
  props: {
    item: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {};
  },
};
</script>
<style lang="less">
@base: 23.44rem;
.custom_group_price {
  margin: (10 / @base) (10 / @base);
  &.black {
    .custom_group_price_content {
      .custom_group_price_content_item {
        article {
          header {
            h1 {
              background-color: #333;
              color: #fff;
            }
            p {
              color: #333;
            }
          }
        }
      }
    }
  }
  h1 {
    &.custom_listpinterest_header {
      height: (15 / @base);
      font-size: (14 / @base);
      line-height: (14 / @base);
      text-align: left;
      padding: (10 / @base) (10 / @base);
      border-bottom: (1 / @base) solid #efefef;
      display: flex;
      overflow: hidden;
      color: #333;
      font-weight: 400;
      div {
        width: 10%;
        &.custom_listpinterest_header_title {
          width: 25%;
          line-height: (14 / @base);
          overflow: hidden;
          height: (15 / @base);
        }
        &.custom_listpinterest_header_slogan {
          width: 65%;
          font-size: (12 / @base);
          line-height: (14 / @base);
          color: #ccc;
          margin: 0 0 0 (10 / @base);
          font-weight: 400;
        }
      }
    }
  }
  .custom_group_price_content {
    .custom_group_price_content_item {
      float: left;
      text-align: center;
      margin: (5 / @base) (2.5 / @base);
      width: (83.5 / @base);
      article {
        header {
          h1 {
            font-size: (12 / @base);
            padding: (5 / @base);
            background-color: #efefef;
            color: #333;
            border-radius: (5 / @base);
            font-weight: 400;
          }
          p {
            margin: (5 / @base) 0 0;
            font-size: (12 / @base);
            color: #ccc;
            span {
              margin: 0 0 0 (5 / @base);
              &.red {
                color: #ce1212;
              }
              &.green {
                color: #07c160;
              }
            }
          }
        }
      }
    }
  }
}
</style>
